<template>
  <div class="sign">
    <div class="image">
      <img
        class="imgs"
        src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019pILfAg7Avr1567732916.png"
      />
    </div>
    <div class="po">
      <CellGroup class="cgp">
        <Field class="inp" v-model="phone" placeholder="请输入手机号" />
        <Field class="inp" v-model="codeword" placeholder="请输入验证码" />
      </CellGroup>
      <div class="ss" @click="getCode">获取验证码</div>
    </div>

    <div class="other">
      <span>*未注册的手机号将自动注册</span>
      <span @click="goLoginmm">使用密码登录</span>
    </div>
    <div class="login">
      <Button type="primary" color="orange" class="btn" block @click="toLogin">登录</Button>
    </div>
    <Drag />
  </div>
</template>

<script>
import { Field, CellGroup, Button } from "vant";
import { getCode, goLogin } from "../../https/https";
import Drag from "../../components/Drag";
export default {
  components: {
    Field,
    CellGroup,
    Drag,
    Button,
  },
  data() {
    return {
      phone: "",
      codeword: "",
      isType: "login",
    };
  },
  methods: {
    goLoginmm() {
      this.$router.push("/loginmm");
    },
    getCode() {
      var obj = {
        mobile: this.phone,
        sms_type: this.isType,
      };
      getCode(obj).then(() => {});
    },
    toLogin() {
      var obj = {
        mobile: this.phone,
        sms_code: this.codeword,
        type: 2,
        client: 1,
      };
      goLogin(obj).then((res) => {
        localStorage.setItem("token", res.remember_token);
        localStorage.setItem('obj',JSON.stringify(res))
        if (localStorage.getItem("token")) {
          this.$router.push({
            path: "/main",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-items: center;
  padding: 50px 0;
}
.imgs {
  width: 65%;
  margin: 0 auto;
}
.cgp {
  width: 80%;
  margin: 10px auto;
}
.inp {
  border-bottom: 1px solid #999;
}
.other {
  width: 80%;
  margin: 0 auto;
  color: #999;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
}
.login {
  width: 80%;
  margin: 80px auto;
  padding-bottom: 200px;
}
.btn {
  border-radius: 10px;
}
.po {
  position: relative;
}
.ss {
  width: 30%;
  height: 38px;
  position: absolute;
  right: 5%;
  text-align: center;
  line-height: 38px;
  top: 0;
  color: orange;
}
</style>